<template>
	<view class="app app-bg">
		<view class="money">
			<text class="text">￥{{ vk.pubfn.priceFilter(balance * 100) }}</text>
			<text>输入提现金额</text>
		</view>
		<view class="info">
			<u-input v-model="value" type="number" placeholder="0" :custom-style="custom" />
			<text class="text" @tap="setAll">全部提现</text>
		</view>
		<view class="fee">提现手续费：{{ need }}</view>
		<view class="title">选择提现方式</view>
		<view class="tips" @tap="vk.navigateTo('/pages/user/setting/account?from=select')">
			<block v-if="select && select.type === 0">
				<image
					src="https://mp-d0bdc000-db91-44a8-852b-e6f607a7ca19.cdn.bspapp.com/pay_ali.png"
					class="icon"
				></image>
				<text class="text">支付宝账号</text>
			</block>
			<block v-else-if="select && select.type === 2">
				<image
					src="https://mp-d0bdc000-db91-44a8-852b-e6f607a7ca19.cdn.bspapp.com/pay_weixin.png"
					class="icon"
				></image>
				<text class="text">微信账号</text>
			</block>
			<block v-else-if="select && select.type === 1">
				<image
					src="https://mp-d0bdc000-db91-44a8-852b-e6f607a7ca19.cdn.bspapp.com/pay_wallet.png"
					class="icon"
				></image>
				<text class="text">银行卡账号</text>
			</block>
			<text class="text" v-else>选择方式</text>
			<u-icon name="arrow-right" color="#999" size="30"></u-icon>
		</view>
		<view class="btn" @tap="confirm">提现</view>
		<payword-pop v-if="show" @finish="finish"></payword-pop>
	</view>
</template>

<script>
var vk = uni.vk
import paywordPop from "./components/payword-pop"

export default {
	components: { paywordPop },
	data() {
		return {
			balance: 0,
			premium: 0,
			value: null,
			custom: {
				borderBottom: "1rpx solid #f5f5f5",
				padding: "0 0 20rpx",
				fontSize: "62rpx",
				color: "#FFC300"
			},
			select: null,

			show: false,
			payword: false
		}
	},
	onLoad() {
		uni.$on("select", res => {
			this.select = res
		})
	},
	onShow() {
		this.getUserInfo()
	},
	computed: {
		need() {
			const { value, premium } = this
			if (!value || !premium) {
				return 0
			}
			return (value * premium).toFixed(2)
		}
	},
	methods: {
		// 获取用户信息
		async getUserInfo() {
			const res = await vk.callFunction({
				url: "client/salesman.queryWalletInfo",
				loading: true
			})
			this.balance = res.balance / 100
			this.premium = res.premium
			this.payword = res.payword
		},
		// 全部提现
		setAll() {
			this.value = this.balance
		},
		// 提现
		confirm() {
			if (this.value < 1) {
				return vk.toast("请输入提现金额")
			}
			if (!this.select) {
				return vk.toast("请选择提现方式")
			}
			if (this.value > this.balance) {
				return vk.toast("提现金额不能大于可提现金额")
			}
			if (!this.payword) {
				return vk.alert("请先前往设置支付密码", () => {
					vk.navigateTo("/pages/user/setting/update-payword")
				})
			}
			this.show = true
		},
		// 支付密码输入完成
		finish(e) {
			this.show = false
			vk.callFunction({
				url: "client/salesman.updateWalletInfo",
				title: "支付中...",
				data: { word: e, value: this.value * 100, select: this.select }
			}).then(res => {
				uni.$emit("saleRefresh")
				vk.toast("申请提现成功", "none", 1000, () => {
					vk.redirectTo(`/pages/salesman/withdraw-detail?id=${res.id}`)
				})
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.money {
	background-color: #ffffff;
	border-top: 1rpx solid #f5f5f5;
	font-weight: bold;
	padding: 30rpx 30rpx 20rpx;
	display: flex;
	flex-direction: column;
	.text {
		padding-bottom: 50rpx;
	}
	.text::before {
		content: "可提现金额：";
		color: #999999;
		font-weight: normal;
		font-size: 26rpx;
	}
}

.info {
	background-color: #ffffff;
	padding: 0 30rpx 30rpx;
	display: flex;
	align-items: flex-end;
	/deep/ .u-input__input {
		padding-bottom: 8rpx !important;
	}
	.text {
		padding: 0 120rpx 0 48rpx;
		color: #24c388;
		font-weight: bold;
	}
}

.fee {
	padding: 20rpx 30rpx;
	color: #999999;
	font-size: 26rpx;
}

.title {
	padding: 30rpx;
	font-weight: bold;
	background-color: #fff;
}

.tips {
	padding: 10rpx 30rpx 30rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	.icon {
		width: 50rpx;
		height: 50rpx;
	}
	.text {
		flex: 1;
		padding-left: 16rpx;
	}
}

.btn {
	border-radius: 44rpx;
	background-color: #24c388;
	margin: 160rpx 26rpx 30rpx;
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ffffff;
}
</style>
